<script setup lang="ts">
import typeChecker from '@/utils/type-checker';

defineOptions(SHARED_STYLE_OPTIONS);

interface IProps {
  title: string;
  titleIcon?: string;
  titleClass?: string;
  value?: string | number;
  valueClass?: string;
  required?: boolean;
  isLink?: boolean;
  border?: boolean;
  arrowDirection?: 'left' | 'right' | 'up' | 'down';
}

withDefaults(defineProps<IProps>(), {
  required: false,
  isLink: false,
  border: false,
});
</script>

<template>
  <view class="bg-white">
    <up-cell
      :required="required"
      :arrowDirection="arrowDirection"
      :isLink="isLink"
      :border="border"
      @click="() => $emit('click')"
    >
      <template #title>
        <view
          :class="['w-260 text-14 flex items-center', titleClass ? titleClass : 'color-gray-5']"
        >
          <view>{{ title }}</view>
          <up-icon v-if="titleIcon" :name="titleIcon" size="12" class="ml-2" />
        </view>
      </template>
      <template #value>
        <view
          v-if="!typeChecker.isEmpty(value)"
          :class="[
            'flex items-center justify-end text-14 text-right',
            valueClass ? valueClass : value ? 'color-gray-5' : 'color-gray-3',
          ]"
        >
          {{ typeChecker.isEmpty(value) ? '暂未维护' : value }}
        </view>
        <slot v-else> </slot>
      </template>
    </up-cell>
    <slot name="content"> </slot>
  </view>
</template>

<style lang="scss" scoped>
:deep(.u-cell__body) {
  align-items: baseline;
}
</style>
